<template>
  <main-card title="仓库管理" :crumbs="crumbs" :online-lab="true" :show-screen-space="false">
    <template #tool-btn>
      <a-button type="primary" @click="createRepository">创建仓库</a-button>
    </template>

    <div class="fbc mb-32">
      <g-input
        v-model:value="pageForm.repositoryName"
        :search="true"
        class="h-36"
        placeholder="请输入名称"
        style="width: 268px"
        @keyup.enter="getDataList({ offset: 1 })"
      />
    </div>
    <a-table
      :style="{ width: '100%' }"
      :columns="tableColumns"
      :data-source="dataList"
      :pagination="false"
      :loading="loading"
      @change="onTableChange"
    >
      <template #bodyCell="{ column, record }">
        <div v-if="column.dataIndex == 'password'" class="flex justify-between gap-8">
          <div class="flex-1 overflow-hidden text-ellipsis" :title="record.visible ? record.password : undefined">
            {{ record.visible ? record.password : '******' }}
          </div>
          <i
            :class="['cursor-pointer', 'iconfont', record.visible ? 'icon-eye-line' : 'icon-eye-close-line']"
            @click="record.visible = !record.visible"
          ></i>
        </div>
        <template v-else-if="column.dataIndex === 'tools'">
          <a-dropdown placement="bottom" @click.stop>
            <a-button type="text" class="icon-only-btn" @click.stop>
              <i class="iconfont icon-more-line"></i>
            </a-button>
            <template #overlay>
              <a-menu>
                <a-menu-item class="menu-icon-item" @click="editRepository(record)"> 编辑 </a-menu-item>
                <a-menu-item class="menu-icon-item" @click="openDeleteModal(record)"> 删除 </a-menu-item>
              </a-menu>
            </template>
          </a-dropdown>
        </template>
        <template v-else-if="column.dataIndex == 'createTime'">
          <div>
            {{ dateFormat(record.createTime) }}
          </div>
        </template>

        <template v-else> {{ replaceEmptyStr(record[column.dataIndex as string]) }} </template>
      </template>
    </a-table>
    <g-pagination v-model:offset="pageForm.offset" v-model:limit="pageForm.limit" :total="pageForm.total" @change="getDataList" />
  </main-card>
  <delete-confirm-dialog
    v-model:show="showDeleteModal"
    title="确认删除"
    msg="仓库删除后，不可恢复，请确认操作"
    label="请输入仓库名称"
    :confirm-name="selectApp?.repositoryName"
    :loading="confirmLoading"
    @ok="onOkDeleteTask"
  />
  <repository-form-model ref="repositoryFormModelRef" :after-close-fn="getDataList" />
</template>

<script lang="ts" setup>
  import { message } from 'ant-design-vue'
  import { dateFormat } from 'g6-fn'
  import { computed, ref } from 'vue'
  import { useRequest } from 'vue-request'

  import useList from '@/hooks/use-list'
  import { mirrorManageApi } from '@/services/api'
  import { filterTableColumns, replaceEmptyStr } from '@/utils'

  import { RepositoryType } from '../../../types/index'
  import RepositoryFormModel from '../../components/repositoryFormModel.vue'

  interface PageForm {
    repositoryName: string
    columns: 'updateTime' | 'createTime'
    order: 'desc' | 'asc'
  }

  const crumbs = computed(() => {
    return [{ path: '/mirror-manage/custom-mirror/list', name: `自定义镜像` }, { name: `仓库管理` }]
  })

  // 表格
  const tableColumns = ref(
    filterTableColumns([
      {
        title: '名称',
        dataIndex: 'repositoryName',
        width: 180
      },
      {
        title: '镜像服务地址 ',
        dataIndex: 'repositoryAddress',
        width: 288
      },
      {
        title: '用户名',
        dataIndex: 'username',
        width: 140
      },
      {
        title: '密码 ',
        dataIndex: 'password',
        width: 220
      },
      {
        title: '描述',
        dataIndex: 'description'
      },
      {
        title: '创建时间',
        dataIndex: 'createTime',
        isSort: true,
        width: 200
      },

      {
        title: '操作',
        width: 60,
        dataIndex: 'tools'
      }
    ])
  )

  const { pageForm, dataList, getDataList, loading } = useList<PageForm, RepositoryType>(mirrorManageApi.getRepositoryList, {
    repositoryName: '',
    columns: 'createTime',
    order: 'desc'
  })

  const onTableChange = (pagination: any, filters: any, sorter: any) => {
    if (!sorter.order) {
      getDataList({ order: 'desc', columns: 'createTime' })
      return
    }
    const order = sorter.order === 'ascend' ? 'asc' : 'desc'
    getDataList({ offset: 1, order, columns: sorter.field })
  }

  /* 新增or编辑------------------------------------------------------------------------------------------------- */
  const repositoryFormModelRef = ref<InstanceType<typeof RepositoryFormModel>>()

  const createRepository = () => {
    repositoryFormModelRef.value?.open()
  }
  const editRepository = (record: any) => {
    repositoryFormModelRef.value?.open(record)
  }

  /* 删除逻辑 -------------------------------------------------------------------------------- */
  const selectApp = ref<RepositoryType>() //当前选中的应用
  const showDeleteModal = ref(false)
  const openDeleteModal = async (item: any) => {
    selectApp.value = item
    showDeleteModal.value = true
  }
  const { loading: confirmLoading, runAsync: runDelRepository } = useRequest(mirrorManageApi.delRepository)
  const onOkDeleteTask = async () => {
    await runDelRepository({}, { urlParams: { id: selectApp.value?.id } })
    message.success('操作成功')
    showDeleteModal.value = false
    getDataList()
  }

  getDataList()
</script>
